<!--
  @Descripttion:：功能描述
  @Author：yejianbo
  @Date：2022年05月26日 16:05:45
-->
<template>
  <div class="header-com">
    <div class="center">
      <div class="logo">
        <img
          src="@/assets/images/home/logo.png"
          @click="linkTo('home')"
          v-imgError
          alt=""
        />
      </div>
      <div class="menu">
        <ul>
          <li :class="[{ current: menuIndex === 0 }]">学生端</li>
          <li :class="[{ current: menuIndex === 1 }]" @click="linkToCompany">
            企业端
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      menuIndex: 0,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    linkTo(name) {
      this.$router.push({ name });
    },
    // 跳转到企业登录页面
    linkToCompany(index) {
      window.open("https://www.datarer.com/admin/", "_blank");
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.header-com {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;

  background-color: #fff;
  border-bottom: 1px solid #d4d6da;
  z-index: 99;
  div.center {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
  }
  .logo {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // padding-right: 50px;
    img {
      position: relative;
      display: block;
      height: 52px;
      cursor: pointer;
    }
    // &:after {
    //   content: "";
    //   display: block;
    //   width: 1px;
    //   height: 52px;
    //   background: #d2d2d2;
    //   position: absolute;
    //   top: 50%;
    //   transform: translateY(-50%);
    //   right: 0;
    // }
  }
  .menu {
    flex: 1219;
    ul {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 100%;
      padding-left: 50px;
      li {
        display: inline-block;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #3d6cb0;
        line-height: 24px;
        margin-right: 30px;
        vertical-align: bottom;
        cursor: pointer;
      }
      .current {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #3d6cb0;
        line-height: 30px;
        vertical-align: bottom;
        position: relative;
        &::after {
          content: "";
          display: blcok;
          position: absolute;
          bottom: -5px;
          left: 0;
          width: 100%;
          height: 2px;
          background: #15539a;
        }
      }
    }
  }
}
</style>
